<template>
  <div class="top-news">
    <div class="top-news-center">
      <!-- 可乐头条图标加搜索框 -->
      <div class="news-input">
        <img src="../../assets/images/keletoutiao.png" alt="" style="width: 30%" />
        <!-- <div class="input-search">
          <div class="input-text">
            <input type="text" />
          </div>
          <div class="search iconfont icon-sousuo hover1"></div>
        </div> -->
      </div>
      <!-- 文章处 -->
      <div class="newslist">
        <ul>
          <li
            v-for="(item, index) in newList"
            :key="index"
            class="hover1"
            @click="toNews(item.id)"
          >
            <p>{{item.title}}</p>
            <span>{{item.add_time_format}}</span>
          </li>
        </ul>
      </div>
      <!-- 分页器 -->
      <div class="pagin" style="width: 100%">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pageCount"
          :small="small"
		  :page.sync="page"
		  @current-change="getNewList($event)"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
	  page: 1,
	  pageCount: 10,
      small: true,
	  newList: []
    };
  },
  watch: {
    //  windowWidth: function (now) {
    //     console.log(this.small);
    //     if (<1400) {
    //       return true;
    //     } else {
    //       return false;
    //     }
    //     if(now<900){
    //       this.small=true
    //     }
    //   },
  },
  methods: {
    toNews(id) {
      this.$router.push({ path: "news?id="+id });
    },
	async getNewList(e) {
    this.page=e
	  let a = await this.$api.getNewsList(this.page,10)
	  this.newList = a.data.data
	  this.pageCount = a.data.count
	},

  },
  mounted: function () {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        this.windowHeight = window.fullHeight; // 高
        this.windowWidth = window.fullWidth; // 宽
      })();
    };
	this.getNewList()
  },
};
</script>

<style scoped>
.top-news {
  width: 100%;
  margin-bottom: -10px;
  /* margin-top: 65px; */
  background-color: #dfe4ea;
}
.top-news-center {
  width: 60%;
  height: 100%;
  background: rgb(255, 255, 255);
  margin:0 auto;
  overflow: hidden;
  min-height: 719px;
}
.news-input {
  padding: 100px 20px 20px 20px;
  border-bottom: solid #dfe4ea 2px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.input-text {
  /* margin-top: 15px; */
  height: 40px;
  width: 300px;
  transform: skew(-15deg);
  border: solid 1px #bdc3c7;
  padding: 0 20px;
  box-sizing: border-box;
}
.input-text input {
  outline: none;
  border: none;
  background: none;
  width: 100%;
  height: 100%;
}
.input-search {
  display: flex;
  justify-content: center;
  align-items: center;
}
.search {
  width: 40px;
  height: 40px;
  /* margin-top: 15px; */
  background-color: #4cbcbc;
  font-size: 32px;
  line-height: 40px;
  transform: skew(-15deg);
}
.newslist {
  padding: 20px;
}
.newslist ul li {
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: rgb(74, 76, 78);
  line-height: 60px;

}
.newslist ul li p{
  width: 75%;
        white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.newslist ul li:hover {
  color: rgb(74, 76, 78, 0.7);
}
.newslist ul li span {
  text-align: center;
  font-size: 18px;
  color: rgb(144, 146, 148);
}
.newslist ul li:hover span {
  color: rgb(144, 146, 148, 0.7);
}
.pagin {
  text-align: center;
  margin: 40px auto;
}
@media screen and (max-width: 1450px) {
  .top-news-center {
    width: 90%;
    margin-top: 50px;
  }
  .newslist ul li p {
    font-size: 14px;
    width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .newslist ul li span {
    font-size:8px;
  }
  .input-text {
    width: 100px;
  }
  /* .top-news{
    margin-top: 50px;
  } */
  .news-input{
    padding-top: 50px;
  }
}
</style>